<template>
    <el-dialog v-model="dialogFormVisible" title="再次申请出库" width="600px" align-center draggable>
        <div class="product-name">
            您申请出库的产品为：{{ formData.product_name }}
        </div>
        <div class="product-name">
            {{ formData.product_name }}的库存还有：{{ formData.product_inwarehouse_number - (formData.product_out_number || 0)
            }}
        </div>
        <div class="dialog-content">
            <el-form :model="formData" label-width="120" style="max-width: 600px" :rules="rules" label-position="left">
                <el-form-item label="申请出库编号" prop="product_out_id">
                    <el-input v-model="formData.product_out_id" disabled />
                </el-form-item>
                <el-form-item label="出库数量" prop="product_out_number">
                    <el-input v-model="formData.product_out_number" />
                </el-form-item>
                <el-form-item label="单位" prop="product_unit">
                    <el-input v-model="formData.product_unit" disabled />
                </el-form-item>
                <el-form-item label="出库单价/元" prop="product_single_price">
                    <el-input v-model="formData.product_single_price" disabled />
                </el-form-item>
                <el-form-item label="出库申请人" prop="product_out_apply_person">
                    <el-input v-model="formData.product_out_apply_person" disabled />
                </el-form-item>
                <el-form-item label="申请备注" prop="apply_memo">
                    <el-input v-model="formData.apply_memo" :rows="2" type="textarea" />
                </el-form-item>
                <!-- <el-form-item label="部门" prop="department">
                    <el-select v-model="formData.department" placeholder="请选择部门">
                        <el-option v-for="(item, index) in departmentData" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item> -->
            </el-form>
        </div>
        <!-- 底部内容 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addProduct">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
    import { ref, reactive, defineExpose, defineEmits, onBeforeUnmount } from 'vue'
    import { ElMessage } from 'element-plus'
    import { applyOutProduct } from '@/api/product.js'
    import { bus } from '@/utils/mitt'

    bus.on('againProductId', (row: any) => {
        console.log(row)
        formData.id = row.id
        formData.product_out_id = row.product_out_id
        formData.product_name = row.product_name
        formData.product_single_price = row.product_single_price
        formData.product_inwarehouse_number = row.product_inwarehouse_number
        formData.apply_memo = row.apply_memo
        formData.product_out_apply_person = row.product_out_apply_person
        formData.product_out_number = row.product_out_number
        formData.product_unit = row.product_unit
        formData.product_out_status = row.product_out_status
    })

    const emit = defineEmits(['success'])

    // const departmentData = ref([])
    // const getdepartment = async () => {
    //     const res: any = await getDepartment()
    //     departmentData.value = JSON.parse(res.result)
    // }
    // getdepartment()
    //产品出库申请
    const addProduct = async () => {
        if (formData.product_inwarehouse_number < formData.product_out_number) {
            ElMessage.error('产品出库申请失败,出库数量不能大于库存数量')
            return
        }
        const res: any = await applyOutProduct(formData)
        if (res.status === 0) {
            ElMessage.success({
                message: '产品出库申请成功',
                type: 'success'
            })
            emit('success')
            dialogFormVisible.value = false
            // formData.id = null
            // formData.product_out_id = null
            // formData.product_out_number = null
            // formData.apply_memo = ''
            // formData.product_name = ''
            // formData.product_single_price = null
            // formData.product_inwarehouse_number = null
        } else if (res.status === 1) {
            ElMessage.warning({
                message: res.message,
                type: 'warning'
            })
        } else {
            ElMessage.error('产品出库申请失败')
        }
    }

    interface FormData {
        id: number
        product_out_id: number
        product_out_number: number
        product_out_apply_person: string
        apply_memo: string
        product_name: string,
        product_single_price: number
        product_inwarehouse_number: number
        product_unit: string
        product_out_status: string
    }

    const formData: FormData = reactive({
        id: null,
        product_out_id: null,
        product_out_number: null,
        product_out_apply_person: '',
        apply_memo: '',
        product_name: '',
        product_single_price: null,
        product_inwarehouse_number: null,
        product_unit: '',
        product_out_status: ''
    })

    //弹窗开关
    const dialogFormVisible = ref(false)
    // 打开弹窗
    const open = () => {
        dialogFormVisible.value = true
    }
    defineExpose({
        open
    })

    const rules = reactive({
        product_out_id: [
            { required: true, message: '请输入出库编号', trigger: 'blur' }
        ],
        product_out_number: [
            { required: true, message: '请输入出库数量', trigger: 'blur' }
        ],
        product_out_apply_person: [
            { required: true, message: '请输入出库申请人', trigger: 'blur' }
        ],
        product_single_price: [
            { required: true, message: '请输入出库单价', trigger: 'blur' }
        ],
        product_unit: [
            { required: true, message: '请输入单位', trigger: 'blur' }
        ]
    })
    onBeforeUnmount(() => {
        bus.all.clear()
    })
</script>
<style lang="scss" scoped>
    .dialog-content {
        display: flex;
        justify-content: space-around;
        padding: 0 30px 20px 30px;
        width: 100%;
    }

    .product-name {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 16px;
        color: #333;
        margin: 10px;
        // text-align: center;
    }

    :deep(.el-form-item) {
        margin: 30px;
    }
</style>